<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html>
<head>
    <title>Title</title>
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="js/jquery-1.8.3.js"></script>
</head>
<body>

    <table id="admin" lay-filter="admin"></table>
    <form class="layui-form" style="display: none" id="adminForm" lay-filter="form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名:</label>
            <div class="layui-input-block">
                <input type="text" name="username" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码:</label>
            <div class="layui-input-block">
                <input type="text" name="password" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>
    <script type="text/html" id="head">
        <a class="layui-btn layui-btn-lg" lay-event="insert">添加</a>
        <a class="layui-btn layui-btn-lg" lay-event="delete">批量删除</a>
    </script>
    <script type="text/html" id="body">
        <a class="layui-btn layui-btn-xs layui-form-danger" lay-event="delete">删除(状态改变)</a>
        <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
    </script>
    <script>
        layui.use(['table','form'],function () {
            var table = layui.table;
            var form = layui.form;

            table.render({
                elem:"#admin",
                page:true,
                limit:3,
                limits:[3,5,7],
                url:"admin/selectAll",
                toolbar:"#head",
                cols:[[
                    {type:"checkbox"},
                    {title:"管理员编号",field:"id"},
                    {title:"管理员名称",field:"username"},
                    {title:"管理员密码",field:"password"},
                    {title:"操作栏",toolbar:"#body"}
                ]]
            })
            table.on('tool(admin)',function (obj) {
                 if(obj.event == 'delete'){
                     layer.confirm('确定删除?',function (index) {
                         $.ajax({
                             url:"admin/delete",
                             data:"ids="+obj.data.id,
                             dataType:"json",
                             success:function (result) {
                                 if(result.isDelete){
                                     layer.close(index);
                                     table.reload('admin');
                                 }
                             }
                         })
                     })
                 }else if(obj.event == 'update'){
                     $.ajax({
                         url:"admin/selectOne",
                         data:"username="+obj.data.username,
                         dataType:"json",
                         success:function (result) {
                             form.val('form',{
                                 id:result.id,
                                 username:result.username,
                                 password:result.password
                             })
                         }
                     })
                     layer.open({
                         title:"修改",
                         content:$("#adminForm"),
                         type:1,
                         area:['350px','400px']
                     })
                     form.on('submit(submit)',function () {
                         $.ajax({
                             url:"admin/update",
                             data:$("#adminForm").serialize(),
                             dataType:"json",
                             success:function (result) {
                                 if(result.isUpdate){
                                     layer.closeAll();
                                     table.reload('admin');
                                 }
                             }
                         })
                         return false;
                     })
                 }
            })
            table.on('toolbar(admin)',function (obj) {
                console.log(obj.config)
                 var check = table.checkStatus(obj.config.id);

                 if(obj.event == 'insert'){
                     layer.open({
                         title:"添加",
                         content:$("#adminForm"),
                         type:1,
                         area:['350px','400px']
                     })
                     form.on('submit(submit)',function () {
                         $.ajax({
                             url:"admin/insert",
                             data:$("#adminForm").serialize(),
                             dataType:"json",
                             success:function (result) {
                                 if(result.isAdd){
                                     layer.closeAll();
                                     table.reload('admin');
                                 }
                             }
                         })
                         return false;
                     })
                 }else if(obj.event == 'delete'){
                     var ids = [];
                     console.log(check);
                     var arr = check.data;
                     if(arr.length>=1){
                         for(var i=0;i<arr.length;i++){
                             ids.push(arr[i].id)
                         }
                         $.ajax({
                             url:"admin/delete",
                             data:"ids="+ids,
                             dataType:"json",
                             success:function (result) {
                                 if(result.isDelete){
                                     table.reload('admin');
                                 }
                             }
                         })
                     }else{
                         layer.msg('至少选择一个');
                     }
                 }
            })
        })
    </script>
</body>
</html>
